<script setup lang="ts">
import { ref, reactive } from 'vue'

//引入api 发送请求获取message列表
import { messagePage, getMessageUsers } from '@/apis/message/index'
import { useShopInfoStore } from '@/store/modules/shopInfo/index'

const $userStore = useShopInfoStore()
const props = defineProps({
    width: {
        type: String,
        default: '',
    },
    title: {
        type: String,
        default: '',
    },
    searchtype: {
        type: Number,
        default: 0,
    },
})
const emit = defineEmits(['search-enter'])
//搜索框宽度需要减去左侧icon的宽度
const searchWidth = Number(props.width) - 90
//搜索关键字
const keyword = ref('')
//input输入框样式
const inputStyle = reactive({
    width: searchWidth + 'rpx',
    'line-height': '40rpx',
    'border-radius': '140rpx',
    'background-color': ' rgba(255, 255, 255, 1)',
    'text-indent': '32rpx',
})

/**
 * 根据用户输入的关键字进行搜索
 */
const handleSearch = async () => {
    switch (props.searchtype) {
        case 0:
            handleSearchMessage()
            break
        case 1:
            handleSearchUserMessage()
            break
        case 2:
            handleBack()
            break
        default:
            break
    }
}
/**
 * 返回搜索框信息
 */
const handleBack = () => {
    emit('search-enter', keyword.value)

    keyword.value = ''
}
/**
 * 搜索message信息
 */
const handleSearchMessage = async () => {
    const res = await messagePage({
        keywords: keyword.value,
        current: 1,
        size: 10,
    })
    emit('search-enter', res)
}
/**
 * 搜索用户消息信息
 */
const handleSearchUserMessage = async () => {
    const res = await getMessageUsers(keyword.value, { current: 1, size: 1000, chatWithType: 'PLAT_FORM' }, $userStore.shopInfo.id)
    const list = res.data.records
    emit('search-enter', list)
    // console.log(res)
}
</script>

<template>
    <u-search
        v-model="keyword"
        bg-color="#fff"
        height="90"
        :show-action="false"
        shape="round"
        :clearabled="true"
        :placeholder="props.title"
        color="rgba(153, 153, 153, 1)"
        :input-style="inputStyle"
        @search="handleSearch"
    ></u-search>
</template>

<style lang="scss" scoped></style>
